<!--asyncComponent-->
<!--https://zhuanlan.zhihu.com/p/143052273-->
<!--https://www.yuque.com/hubugui/frontend/qit5o1-->
<!--https://lmiller1990.github.io/electic/posts/20200503_vue_3_async_components_and_bundle_splitting.html-->
<template>
  <p>EventList3</p>
  <Foo></Foo>
</template>

<script>
import axios from 'axios'
import {onMounted, ref, defineAsyncComponent} from 'vue'
import {useStore} from 'vuex'
import EventList3Foo from "./EventList3Foo.vue";

const Foo = {
  template: `Foo Component`
}

let store = null;
export default {
  name: "EventList3",
  data() {
    store = this.$store;
  },
  components: {
    // Foo: EventList3Foo
    // Foo: defineAsyncComponent(() => import('./EventList3Foo.vue'))
    // Foo: defineAsyncComponent(() => new Promise((resolve, reject) => {
    //   setTimeout(() => {
    //     // resolve({template: "<div>Async component</div>"}
    //     resolve(import('./EventList3Foo.vue')
    //     );
    //   }, 1500);
    // }))
    Foo: defineAsyncComponent(() => axios.get('/events/1').then(res => import('./EventList3Foo.vue')))
  }
}
</script>
